<template>
    <div class="center">
        <!-- 概览 -->
        <div class="home-overview">
            <!-- 用户信息 -->
            <div class="user-meta">
                <div class="avatar">
                    <!-- <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png"/> -->
                </div>
                <!-- <h4>黄小波</h4> -->
            </div>
            <!-- <div class="item">
        <a href="javascript:;">
          <span class="iconfont icon-hy"></span>
          <p>会员中心</p>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-aq"></span>
          <p>安全设置</p>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-dw"></span>
          <p>地址管理</p>
        </a>
      </div> -->
        </div>
        <!-- 我的收藏 -->
        <div class="shou">
            <img src="../../assets/img/个人中心我的收藏.png" alt="">
        </div>
        <!-- 我的收藏 -->
        <div class="jiao">
            <img src="../../assets/img/个人中心我的足迹.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    name: 'MemberHomeOverview'
}
</script>
<style scoped lang="scss">
.center {
    width: 70%;

    .home-overview {
        width: 1000px;
        height: 132px;
        background: url(../../assets/img/个人中心logo.png) no-repeat center / cover;
        display: flex;

        .user-meta {
            flex: 1;
            display: flex;
            align-items: center;

            .avatar {
                width: 85px;
                height: 85px;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 60px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            h4 {
                padding-left: 26px;
                font-size: 18px;
                font-weight: normal;
                color: white;
            }
        }

        .item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;

            &:first-child {
                border-right: 1px solid #f4f4f4;
            }

            a {
                color: white;
                font-size: 16px;
                text-align: center;

                .iconfont {
                    font-size: 32px;
                }

                p {
                    line-height: 32px;
                }
            }
        }
    }

    .shou {
        width: 1000px;
        margin-top: 20px;
    }
    .jiao {
        width: 1000px;
        margin-top: 20px;
    }
}
</style>